import { h } from 'vue'
import { Graph } from '@antv/x6'
import GroupHeader from './GroupHeader'
import SourceNode from './SourceNode'
import TargetNode from './TargetNode'

export const defaultViewId = 'antv-group-teleport-view'

// 注册一个自定义组件
Graph.registerNode('source-node', {
  inherit: 'vue-shape',
  view: defaultViewId,
  x: 0,
  y: 0,
  width: 248,
  height: 36,
  component: {
    render: () => h(SourceNode),
  },
})

Graph.registerNode('target-node', {
  inherit: 'vue-shape',
  view: defaultViewId,
  x: 0,
  y: 0,
  width: 248,
  height: 36,
  component: {
    render: () => h(TargetNode),
  },
})

Graph.registerNode('group-header', {
  inherit: 'vue-shape',
  view: defaultViewId,
  x: 0,
  y: 0,
  width: 248,
  height: 48,
  component: {
    render: () => h(GroupHeader),
  },
})

Graph.registerEdge(
  'group-edge',
  {
    inherit: 'edge',
    attrs: {
      line: {
        stroke: '#9098A9',
        strokeWidth: 0.5,
        strokeDasharray: 5,
        sourceMarker: {
          name: 'circle',
          fill: '#fff',
          r: 3,
        },
        targetMarker: {
          name: 'circle',
          fill: '#fff',
          r: 3,
        },
      },
    },
  },
  true,
)
